<template>
  <div class="edit">
    <!-- 头部tab -->
    <div class="header-wrap">
      <span class="header-wrap-left"  @click="goback">
        <i class="iconback iconfont icon-fanhui"></i>
      </span>
      <span class="header-wrap-text">个人信息</span>
      <span class="header-wrap-right" @click="showVerification">
        <i class="iconseach iconfont icon-bianji"></i>
      </span>
    </div>
    <div class="edit-imgBox">
      <div class="edit-avatarImg">
          <input type="file" class="input-file" name="avatar"  @change="changeImage($event)" multiple="multiple" accept="image/*">
          <img v-if="infoData.avatar" :src="infoData.avatar" alt="">
      </div>
    </div>
    <div class="edit-list">
      <span class="edit-title">姓名</span>
      <span class="edit-text">{{infoData.nickname}}</span>
    </div>
    <div class="edit-list">
      <span class="edit-title">电话</span>
      <span class="edit-text edit-phone">
        <span>{{infoPhone}}</span>
        <span @click='toverification' v-if="infoData.mobiles&&infoData.mobiles[0].proven == false" style="color:#ee598b;">点击认证手机号</span>
        <span @click='tipsverification' v-else style="color:#0eac69;">手机号码已认证</span>
      </span>
    </div>
    <!-- 手机号码弹窗 -->
    <van-dialog
      v-model="showConfirm"
      confirmButtonColor='#FD5585'
      :beforeClose = 'verification'
      :showCancelButton	 = 'true'
    >
    <van-field type='tel' clearable v-model="infoPhone"/>
    <van-field type='tel' clearable v-model="mobile" placeholder="请输入您要修改的手机号码"/>
    </van-dialog>
  </div>
</template>
<script>
import api from '../../api/api.js'
import { Dialog,Field } from 'vant';
export default {
  data(){
    return{
      host: api.host,
      mobile:'',
      showConfirm:false,
      infoData:[],
      infoPhone:''
    }
  },
  created(){
    this.getinfo()
  },
  methods:{
    goback(){
      this.$router.go(-1)
      // window.location.reload();
    },
    //用户资料修改
    newinfo(){
      this.$get(api.newinfo, {
        params:{
          avatar: this.infoData.avatar,
          nickname: this.infoData.nickname
        }
      })
      .then((res) => {
        if(res.data.code===1){
          this.newinfoData = res.data.data
          this.$vux.toast.text('修改成功')
          }
        })
      .catch((error) => {
        console.log(error);
      });   
    },
    changeImage(e){
      let file = e.target.files[0];
      this.file = file
      let reader = new FileReader()
      let that = this
      reader.readAsDataURL(file)
      reader.onload= function(e){
        that.infoData.avatar =  this.result
        //回调
        that.compress(this.result, 1000, 0.5).then(function (backimg){
          that.upload(backimg)
        });
      }
    },
    upload(){
      this.$post(api.upload, {
        base64: this.infoData.avatar
      })
      .then((res) => {
      if(res.data.code===1){
          this.infoData.avatar=res.data.data.url
          if(this.infoData.avatar.indexOf('http://')==-1&&this.infoData.avatar.indexOf('https://')==-1){
          this.infoData.avatar = this.host+this.infoData.avatar
          this.newinfo()
        }
      }
      })
      .catch((error) => {
        console.log(error);
      })
    },
    compress:function (base64String, w, quality) {
      var getMimeType = function (urlData) {
      var arr = urlData.split(',');
      var mime = arr[0].match(/:(.*?);/)[1];
      // return mime.replace("image/", "");
      return mime;
      }
      var newImage = new Image();
      var imgWidth, imgHeight;
      var promise = new Promise(resolve => newImage.onload = resolve);
      newImage.src = base64String;
      return promise.then(() => {
        imgWidth = newImage.width;
        imgHeight = newImage.height;
        var canvas = document.createElement("canvas");
        var ctx = canvas.getContext("2d");
        if (Math.max(imgWidth, imgHeight) > w) {
          if (imgWidth > imgHeight) {
            canvas.width = w;
            canvas.height = w * imgHeight / imgWidth;
          } else {
            canvas.height = w;
            canvas.width = w * imgWidth / imgHeight;
          }
        } else {
          canvas.width = imgWidth;
          canvas.height = imgHeight;
        }
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.drawImage(newImage, 0, 0, canvas.width, canvas.height);
        var base64 = canvas.toDataURL(getMimeType(base64String), quality);
        return base64;
      })
    },
    toverification(){
      let routermobile = this.infoPhone
      this.$router.push({
        path: '/verification',
        query: {
          routermobile
        }
      })
    },
    tipsverification(){
      this.$toast('手机号已认证')
    },
   //获取用户资料
    getinfo(){
      this.$get(api.info, {})
      .then((response) => {
        this.infoData = response.data.data
        this.infoPhone = response.data.data.defaultMobile
      })
      .catch((error) => {
        console.log(error)
      });              
    },
    showVerification(){
      this.showConfirm = true
    },
   //修改手机号
    verification(action,done){
      if(action == 'cancel') {
         done() //关闭
         return
      }
      var reg = /^([1][0-9]{10})$/;
        if(this.mobile==''){
          done(false)
          this.$toast('请输入手机号')
          return
        }
        if(!reg.test(this.mobile)){
          done(false)
          this.$toast('手机格式不正确')
          return
        }
      this.$get(api.mobile, {
        params:{
          org_mobile: this.infoPhone,
          mobile: this.mobile
        }
      })
      .then((response) => {
        if(response.data.code===1){
          this.mobile = response.data.data
          done(true)
          this.getinfo()
          this.$toast(response.data.msg)
          this.showConfirm=false
        }
      })
      .catch((error) => {
        console.log(error);
      }); 
    },
  },
  components:{
    [Dialog.Component.name]: Dialog.Component,
    [Field.name]:Field,
  }
}
</script>
<style>
</style>

<style scoped>
.edit-imgBox{
  position: relative;
  padding-top: 1.5rem;
  width: 100%;
  height: 3.5rem;
}
.edit-imgBox img{
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.input-file{
  width: 100%;
  height: 100%;
  opacity: 0;
  position: absolute;
  left: 0;
  top: 0;
}
.edit-avatarImg{
  position: absolute;
  left:calc(50% - 1.2rem);
  top: 30%;
  border-radius: 50%;
  width: 2.4rem;
  height: 2.4rem;
  background: #fff;
}
.edit-list{
  padding:0 .5rem .3rem;
  font-weight: bold;
}
.edit-title{
  display: block;
  color: #57c5c6;
  margin-bottom: .1rem;
}
.edit-text{
  display: block;
  font-size: .32rem;
  color: #000; 
}
.edit-phone{
  display: flex;
}
.edit-phone span{
  flex : 1;
  display: block;
}
.edit-phone span:nth-of-type(2){
  text-align: right;
  font-size: .3rem;
}
</style>


